<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-stepper"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-stepper__button"
			:hover-class="hoverClass"
			@tap="_handleMinus"
			@longpress="_handleLongMinus"
			@touchend="_clearLongTapTimer"
			:class="{ 'pure-stepper__button--disabled': _isDisabledMinus }"
			v-if="minus"
		>
			<pure-icon
				:name="minusIconName"
				v-bind="minusIconOpts"
			></pure-icon>
		</view>
		<view class="pure-stepper__content">
			<input
				class="pure-stepper__input"
				type="number"
				:value="modelValue"
				:cursor-spacing="cursorSpacing"
				:focus="focus"
				:confirm-hold="confirmHold"
				:cursor="cursor"
				:cursor-color="cursorColor"
				:selection-start="selectionStart"
				:selection-end="selectionEnd"
				:adjust-position="adjustPosition"
				:auto-blur="autoBlur"
				:always-embed="alwaysEmbed"
				:hold-keyboard="holdKeyboard"
				:random-number="randomNumber"
				:controlled="controlled"
				:always-system="alwaysSystem"
				:inputmode="inputmode"
				@focus="_onFocus"
				@input="_onInput"
				@blur="_onBlur"
				@confirm="_onConfirm"
				@keyboardheightchange="_onKeyboardheightchange"
			/>
		</view>
		<view
			class="pure-stepper__button"
			:hover-class="hoverClass"
			@tap="_handlePlus"
			@longpress="_handleLongPlus"
			@touchend="_clearLongTapTimer"
			:class="{ 'pure-stepper__button--disabled': _isDisabledPlus }"
			v-if="plus"
		>
			<pure-icon
				:name="plusIconName"
				v-bind="plusIconOpts"
			></pure-icon>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { computed, inject, watch, onUnmounted, useAttrs } from "vue";
	import props from "./props";
	import { delay } from "@/uni_modules/pure-utils";

	// 长按定时器
	let _longTapTimer = null;

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Injects
	const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([
		"onInput",
		"onFocus",
		"onBlur",
		"onConfirm",
		"onKeyboardheightchange",
		"update:modelValue",
		"onNaN",
		"onMinus",
		"onPlus",
		"onOutMin",
		"onOutMax",
		"onLongMinus",
		"onLongPlus"
	]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 禁用
		if (_props.disabled) array.push("pure-stepper--disabled");

		// 只读
		if (_props.readonly) array.push("pure-stepper--readonly");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 宽
		if (_props.width) array.push(`--pure-stepper-width: ${_props.width};`);

		// 高
		if (_props.height) array.push(`--pure-stepper-height: ${_props.height};`);

		return array;
	});

	// 是否禁用减号按钮
	const _isDisabledMinus = computed(() => {
		return _props.modelValue <= _props.min;
	});

	// 是否禁用加号按钮
	const _isDisabledPlus = computed(() => {
		return _props.modelValue >= _props.max;
	});

	// 监听值，变化后通知表单项
	watch(
		() => _props.modelValue,
		(newValue, oldValue) => {
			if (newValue !== oldValue) {
				PureFormItemOnChange?.();
			}
		}
	);

	// 减
	function _handleMinus() {
		// 异步
		if (_props.async) {
			_emits("onMinus");
			return;
		}

		// 非异步
		const targetValue = _props.modelValue - _props.step;

		// 超出最小值
		if (targetValue < _props.min) {
			_emits("onOutMin", targetValue);
			_emits("update:modelValue", _props.min);
			return;
		}

		// 更新值
		_emits("update:modelValue", targetValue);
	}

	// 加
	function _handlePlus() {
		// 异步
		if (_props.async) {
			_emits("onPlus");
			return;
		}

		// 非异步
		const targetValue = _props.modelValue + _props.step;

		// 超出最大值
		if (targetValue > _props.max) {
			_emits("onOutMax", targetValue);
			_emits("update:modelValue", _props.max);
			return;
		}

		// 更新值
		_emits("update:modelValue", targetValue);
	}

	// 长按减
	function _handleLongMinus() {
		// 长按加减
		if (!_props.longpress) return;

		// 异步
		if (_props.async) {
			_emits("onLongMinus");
			return;
		}

		// 非异步
		_longTapTimer = setInterval(() => {
			const targetValue = _props.modelValue - _props.step;

			// 超出最小值
			if (targetValue < _props.min) {
				_emits("onOutMin", targetValue);
				_emits("update:modelValue", _props.min);
				_clearLongTapTimer();
				return;
			}

			// 更新值
			_emits("update:modelValue", targetValue);
		}, 200);
	}

	// 长按加
	function _handleLongPlus() {
		// 长按加减
		if (!_props.longpress) return;

		// 异步
		if (_props.async) {
			_emits("onLongPlus");
			return;
		}

		// 非异步
		_longTapTimer = setInterval(() => {
			const targetValue = _props.modelValue + _props.step;

			// 超出最大值
			if (targetValue > _props.max) {
				_emits("onOutMax", targetValue);
				_emits("update:modelValue", _props.max);
				_clearLongTapTimer();
				return;
			}

			// 更新值
			_emits("update:modelValue", targetValue);
		}, 200);
	}

	// 清除长按定时器
	function _clearLongTapTimer() {
		clearTimeout(_longTapTimer);
		_longTapTimer = null;
	}

	// 输入事件
	async function _onInput(e) {
		_emits("onInput", e);
		const value = Number(e.detail.value);

		// 异步
		if (_props.async) {
			return;
		}

		// 在有效区间
		if (value >= _props.min && value <= _props.max) {
			_emits("update:modelValue", value);
			return;
		}

		// 不在有效区间，得先更新一下值
		_emits("update:modelValue", value);

		// 输入值无效
		if (isNaN(value)) {
			await delay(20);
			_emits("update:modelValue", _props.modelValue);
			_emits("onNaN", value);
			return;
		}

		// 超出最大值
		if (value > _props.max) {
			_emits("onOutMax", value);
			await delay(20);
			_emits("update:modelValue", _props.max);
			return;
		}

		// 超出最小值
		if (value < _props.min) {
			_emits("onOutMin", value);
			await delay(20);
			_emits("update:modelValue", _props.min);
			return;
		}
	}

	// 获取焦点事件
	function _onFocus(e) {
		_emits("onFocus", e);
	}

	// 失去焦点事件
	function _onBlur(e) {
		_emits("onBlur", e);
		PureFormItemOnBlur?.();
	}

	// 确认事件
	function _onConfirm(e) {
		_emits("onConfirm", e);
	}

	// 键盘高度变化事件
	function _onKeyboardheightchange(e) {
		_emits("onKeyboardheightchange", e);
	}

	// 组件卸载时
	onUnmounted(() => {
		// 清除长按定时器
		_clearLongTapTimer();
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
